<template>
    <el-upload class="upload-demo" action="http://cdn.kcz66.com/uploadFile.txt" :on-remove="handleRemove"
        :onSuccess="handleSuccess" :limit="3" :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</template>
<script>


export default {
    props: {
        value: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        fileList: {
            get() {
                return this.value
            },
            set(e) {
                this.$emit('change', e)
            }
        }
    },
    methods: {
        /**
         * 上传成功时处理
         */
        handleSuccess(response, file) {
            // code 等于 0 上传成功,状态码可以自行修改
            if (response.code === 0) {
                this.fileList = [...this.fileList, { name: file.name, uid: file.uid, url: response.data.url }]
            }
        },

        /**
         * 删除文件
         */
        handleRemove(file) {
            this.fileList = this.fileList.filter(item => item.uid !== file.uid)
        }

    }
}
</script>
<style>
/* 解决与antd ui 样式冲突 */
.el-upload__input[type=file] {
    display: none !important;
}

.el-upload-list__item-status-label {
    position: absolute !important;
}
</style>